import { useState } from 'react'
import WeUI from 'react-weui'  // react 组件框架

const { 
    MediaBox,
    MediaBoxHeader,
    MediaBoxBody,
    MediaBoxTitle,
    MediaBoxDescription 
} = WeUI;

function List(props) {
    const {data} = props;
    return (
        data.map(book => 
            <Book key={book.id} info={book}/>
        )
    )
}

function Book(props) {
    // props 非自有的，传入的
    const {info} = props;
  return (
    // weui 组件框架
    <MediaBox type="appmsg">
        <MediaBoxHeader>
            <img src="http://img53.ddimg.cn/2310311665003.jpg" alt=""/>
        </MediaBoxHeader>
        <MediaBoxBody>
            <MediaBoxTitle>{info.title}</MediaBoxTitle>
            <MediaBoxDescription>{info.des}</MediaBoxDescription>
        </MediaBoxBody>
    </MediaBox>
    // 传统方式
    // <div>
    //     <div>{
    //         data.map(item => 
    //             <div key={item.id}>{item.title} {item.des}</div>
    //         )
    //     }</div>
    // </div>
  )
}

export default List